"use client"
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";

const LinkData =  [
    {name:'about',path:'/dashbord/about'},
    {name:'settings',path:'/dashbord/settings'},
]
export default function DashbordLayout({
    children,
  }: Readonly<{
    children: React.ReactNode;
  }>) {
    const [count,setCount] = useState(0);
    const pathname = usePathname();
    console.log(pathname)
    return (
        <div className="border-2 border-dashed border-black p-4">
            我是dashbord中的layout
            <div className="flex gap-8 font-bold text-lg mb-4 text-purple-500">
                {
                    LinkData.map((item)=>{
                        return <Link className={`link ${pathname===item.path?'active':''}`} key={item.name} href={item.path}>{item.name}</Link>
                    })
                }
                {/* <Link className={`link ${pathname==='/dashbord/about'?'active':''}`} href="/dashbord/about">about</Link>
                <Link className={`link ${pathname==='/dashbord/settings'?'active':''}`} href="/dashbord/settings">settings</Link> */}
            </div>
            <h2>dashbord layout {count}</h2>
            <button onClick={()=>{setCount(count+1)}}>增加</button>
             {children}
        </div>
    );
  }